import { lazy } from 'react'

import { useRoutes } from 'react-router-dom'

const Home = lazy(() => import('@/pages/Home'))
const Dubber = lazy(() => import('@/pages/Dubber'))
const Anime = lazy(() => import('@/pages/Anime'))
const AnimeDetail = lazy(() => import('@/pages/AnimeDetail'))

const useRouter = () => {
  const routes = useRoutes([
    {
      path: '/',
      element: <Home />,
    },
    {
      path: '/dubber',
      element: <Dubber />,
    },
    {
      path: '/anime',
      element: <Anime />,
    },
    { path: '/anime/play/:id/:ep', element: <AnimeDetail /> },
  ])
  return routes
}

export default useRouter
